<template>
  <div>
    <template>
      <div>
        <!-- 筛选框 -->
        <slot name="formSolt"></slot>
      </div>
      <div>
        <!-- 按钮 -->
        <slot name="btnSolt"></slot>
      </div>

      <el-table
        @current-change="handleCurrentChange1"
        highlight-current-row
        :data="tableData"
        style="width: 100%"
        :stripe="stripe"
        :border="border"
        :max-height="maxheight"
        @selection-change="handleSelectionChange"
      >
        <el-table-column v-if="isCheckbox" type="selection" width="50"> </el-table-column>
        <el-table-column type="expand" v-if="isexpand">
          <template slot-scope="props">
            <slot name="expandBox" v-bind:operationData="props.row"></slot>
          </template>
        </el-table-column>
        <el-table-column fixed="ID" label="ID" width="150"> </el-table-column>
        <el-table-column
          v-for="(item, index) in headerData"
          :key="index"
          :prop="item.prop"
          :label="item.label"
          :min-width="item.width"
        >
          <template slot-scope="scope">
            <div v-if="item.slot">
              <slot :name="item.prop" v-bind:row="scope.row"></slot>
            </div>
            <div v-if="!item.slot">
              {{ tableData[scope.$index][item.prop] }}
            </div>
          </template>
        </el-table-column>
        <!-- http://localhost:9528/dev-api/file/getImgStream?idFile=75b1e658-161e-4b12-83b0-abd2c1bead39.jpg -->
        <!-- http://localhost:9528/dev-api/file/getImgStream?idFile=  -->
        <!-- 75b1e658-161e-4b12-83b0-abd2c1bead39.jpg" -->
        <el-table-column
          v-if="isoperation"
          fixed="right"
          label="操作"
          width="300"
        >
          <template slot-scope="scope">
            <!-- vue插槽 
            什么时候使用vue插槽？
            如果在子组件里面布局和功能在不同的模块页面不一样
            的时候我们会使用插槽来插入到当前子组件
            保持这个组件在其他页面不受影响

            Vue插槽有哪些？
            我只知道vue的插槽叫做slot
          -->
            <!-- <slot name="当前插槽的名字" v-bind:传入给插槽的数据的定义名="当前传入插槽的数据值"></slot> -->

            <!-- <el-button @click="handleClick(scope.row)" type="text" size="small"
              >查看</el-button
            >
            <el-button type="text" size="small">编辑</el-button> -->

            <slot name="operationBtn" v-bind:operationData="scope.row"></slot>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="paginationStyle"
        v-if="ispagination"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </template>
  </div>
</template>
<script>
// import template from "../view/financial/template.vue";
export default {
  // components: { template },
  name: "superTable",
  data() {
    return {};
  },
  methods: {
    //Checkbox 
    handleSelectionChange(val){
      let _self = this;
      // console.log(val);
      _self.$emit("Delete",val)
    },
    //选中删除
    handleCurrentChange1(val) {
      let _self = this;
      // this.currentRow = val;
      // console.log(val);
      _self.$emit("IDchange", val);
    },

    //每页显示多少条
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      // 子组件向父组件
      let _self = this;
      // $emit("发送给父组件的名字" ,传输的数据)
      _self.$emit("SizeChange", val);
    },

    //当前第几页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      let _self = this;
      _self.$emit("CurrentChange", val);
    },

    handleClick(row) {
      console.log(row);
    },
  },
  // 不管是兄弟组件 还是 全局组件 还是父子组件
  // 离不开他本身就是vue文件 ，只要是项目中vue文件他都有data 生命周期 监听 计算 过滤 事件
  // 父子组件传值 子组件接收父组件传递过来的数据 我们是用props接收参数
  // 子组件对于我们开发者来说就是一个无数据的大盒子
  // 数据来源都是父组件控制
mounted() {
      let _self = this;
    for (let index in _self.tableData) {
    //   _self.tableData[index].$index = index;
      _self.$set( _self.tableData[index], '$index', index)
    }
},
  updated() {
    // 组件没有重新渲染 但是你仍然要获取组件更新的数据
    // console.log(this.tableData1);
    let _self = this;
    for (let index in _self.tableData) {
     _self.$set( _self.tableData[index], '$index', index)
    }
  },
  //     watch:{
  //   //深度监听 监听值key值为对象名
  //     tableData:{
  //             deep:true,//是否开启深度监听
  //             handler:function(newval){//深度监听后触发的函数

  //                 for(let index in newval){
  //                     newval[index].$index = index;
  //                 }
  //             }
  //         },
  //     },

  props: {
    /* 
      传入的数据的名字：{
      type:"该数据的数据类型",
      default:()=>{
          retrun 如果父组件没有传递该数据 该数据显示会默认显示什么值
          }    
        }
    */
    headerData: {
      type: Array,
      default: () => {
        return [];
      },
    },
    tableData: {
      type: Array,
      default: () => {
        return [];
      },
    },
    stripe: {
      type: Boolean,
      default: () => {
        return true;
      },
    },
    border: {
      type: Boolean,
      default: () => {
        return true;
      },
    },
    maxheight: {
      type: Number,
      default: () => {
        return 550;
      },
    },
    //是否显示操作栏
    isoperation: {
      type: Boolean,
      default: () => {
        return true;
      },
    },
    //是否显示分页
    ispagination: {
      type: Boolean,
      default: () => {
        return true;
      },
    },
    //当前页数
    currentPage: {
      type: Number,
      default: () => {
        return 1;
      },
    },
    //每页多少条
    limit: {
      type: Number,
      default: () => {
        return 10;
      },
    },
    //总条数
    total: {
      type: Number,
      default: () => {
        return 10;
      },
    },
    // 是否有下拉箭头数据
    isexpand: {
      type: Boolean,
      default: () => {
        return false;
      },
    },
     // isCheckbox
    isCheckbox: {
      type: Boolean,
      default: () => {
        return true;
      },
    },
  },
};
</script>
<style>
.paginationStyle {
  margin-top: 20px;
  margin-left: 20px;
}
 .el-table__body-wrapper::-webkit-scrollbar{
     /*width: 0;宽度为0隐藏*/
    width: 2px;
  }
 .el-table__body-wrapper::-webkit-scrollbar-thumb{
    border-radius: 2px;
    height: 50px;
    background: #eee;
  }
 .el-table__body-wrapper::-webkit-scrollbar-track{
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 2px;
    /* background: rgba(0,0,0,0.4); */
  }

</style>